<template>
  <div class="teacher_info">
    <custom-title title="用户资料" />
    <el-descriptions
      style="margin-top: 20px; margin-bottom: 20px"
      :column="1"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">用户ID</div>
        </template>
        0000001
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">教师姓名</div>
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">联系方式</div>
        </template>
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">邮箱</div>
        </template>
        <el-tag size="small">院系/班级 </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">创建时间</div>
        </template>
        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">最近登录时间</div>
        </template>
        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
      </el-descriptions-item>
    </el-descriptions>

    <custom-title title="统计信息" />

    <el-descriptions style="margin-top: 20px" :column="1" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">学生人数</div>
        </template>
        0000001
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">作品总数</div>
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">优秀作品数</div>
        </template>
        Suzhou
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import customTitle from "@/components/custom-title/index.vue";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";
import type { ComponentSize } from "element-plus";

const size = ref<ComponentSize>("default");

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});
const blockMargin = computed(() => {
  const marginMap = {
    large: "32px",
    default: "28px",
    small: "24px",
  };
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  };
});
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}

.teacher_info {
  background: white;
  padding: 20px;
}
</style>
